<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 select-info">
			
				<form id="picture-form">
					<div>
						<ul>
							<li style="display:inline-block;overflow: hidden;margin-right:20px">
								<img id="img" style="width:100px;height:100px"/>	
							</li>
							<li style="display:inline-block;overflow: hidden;margin-right:50px">
								<input id="searchfile" type="file">
							</li>
							<li style="display:inline-block;overflow: hidden;margin-right:50px">
								检索算法：<select id="type" name="status">
									<option value="CEDD">CEDD</option>
									<option value="PHOG">PHOG</option>
									<option value="ColorLayout">ColorLayout</option>
									<option value="FCTH">FCTH</option>
									<option value="JCD">JCD</option>
									<option value="ScalableColor">ScalableColor</option>
									<option value="EdgeHistogram">EdgeHistogram</option>
									<option value="AutoColorCorrelogram">AutoColorCorrelogram</option>
									<option value="Tamura">Tamura</option>
									<option value="Gabor">Gabor</option>
									<option value="SimpleColorHistogram">SimpleColorHistogram</option>
									<option value="OpponentHistogram">OpponentHistogram</option>
									<option value="JointHistogram">JointHistogram</option>
									<option value="LuminanceLayout">LuminanceLayout</option>
									<option value="ACCID">ACCID</option>
									<option value="COMO">COMO</option>
								</select>
							</li>
							<li style="display:inline-block;overflow: hidden;margin-right:50px">
								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchImg();"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
                

       		 <div class="col-sm-12 select-table table-striped">
	            <table id="bootstrap-table" data-mobile-responsive="true" >
	           
	            	<div id="searchResult" class="row">
			           
			           </div>
		           </div>

	            </table>
	        </div>

	    </div>
	</div>
					
	
	<div th:include="include :: footer"></div>
	<script type="text/javascript">
	$(function (){
		 $("#searchfile").change(function (){
			 var $file = $(this);
		        var fileObj = $file[0];
		        var windowURL = window.URL || window.webkitURL;
		        var dataURL;
		        var $img = $("#img");
		        if (fileObj && fileObj.files && fileObj.files[0]) {
		            dataURL = windowURL.createObjectURL(fileObj.files[0]);
		            $img.attr('src', dataURL);
		        } else {
		            dataURL = $file.val();
		            var imgObj = document.getElementsByClassName("img1")[0];
		            // 两个坑:
		            // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
		            // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
		            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
		            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
		        }
		 });
	});

	function searchImg(){
		var url="/system/picture/lire/search";
		var file_obj = document.getElementById('searchfile').files[0];
		var formdata = new FormData();
		formdata.append('searchfile', file_obj);  
		formdata.append('type', $("#type").val());  
        $.modal.loading("正在处理中，请稍后...");
        $.ajax({
            url: url,
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function(result) {
            	$.modal.closeLoading();
            	var html= "";
            	for(var index in result){
            		html+="<div class='col-xs-6 col-lg-3\'  style='width:300px;height:300px;margin:20px;'>"
            		+"<a onclick=\"$.modal.open('detail','/system/picture/detail/"
            		+result[index].pictureId+"')\">"
            		+"<img src='/"+result[index].thumbnailPath+"'/>"
            		+"<p>"+result[index].fileName+"</p>"
            		+"</a>"
            		+"</div>";
            		$("#searchResult").html(html);
            	}
            }
        })
    }
</script>
</body>
</html>